<style>
  .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .img{
      width: 100px;
      height: 120px;
    }
</style>
<template>
  <Modal
    :value="modalState"
    :title="title"
    :loading="loading"
    @on-ok="handleSubmit"
    @on-cancel="cancel"
    width="70%">
    <Form
      ref="employeeModal"
      :model="row"
      :rules="ruleInline"
      inline
      style="width: 100%"
      :label-width="90">
      <FormItem prop="name" label="姓名" style="width: 250px">
        <Input type="text" v-model="row.name" placeholder="请输入姓名" />
      </FormItem>
      <FormItem prop="tel" label="联系电话" style="width: 250px">
        <Input type="text" v-model="row.tel" placeholder="请输入联系电话" />
      </FormItem>
      <FormItem v-show="row.id" prop="age" label="年龄" style="width: 250px">
        <Input type="text" v-model="row.age" disabled placeholder="请输入年龄" />
      </FormItem>
      <FormItem prop="sex" label="性别" style="width: 250px">
        <Select v-model="row.sex" clearable placeholder="请选择性别">
          <Option value="男">
            男
          </Option>
          <Option value="女">
            女
          </Option>
        </Select>
      </FormItem>
      <FormItem prop="people" label="民族" style="width: 250px">
        <Input type="text" v-model="row.people" placeholder="请输入民族" />
      </FormItem>
      <FormItem prop="marriage" label="婚姻状态" style="width: 250px">
        <Select v-model="row.marriage" clearable placeholder="请选择婚姻状态">
          <Option value="未婚">
            未婚
          </Option>
          <Option value="已婚">
            已婚
          </Option>
        </Select>
      </FormItem>
      <FormItem prop="coage" v-show="row.id" label="司龄" style="width: 250px">
        <Input type="text" v-model="row.coage" disabled placeholder="请输入司龄" />
      </FormItem>
      <FormItem prop="idcard" label="身份证号" style="width: 250px">
        <Input type="text" v-model="row.idcard" placeholder="请输入身份证号" />
      </FormItem>
      <FormItem prop="birthmonth" label="出生年月" style="width: 250px">
        <DatePicker v-model="row.birthmonth" type="month" placeholder="请输入出生年月"></DatePicker>
      </FormItem>
      <FormItem prop="birthday" label="生日日期" style="width: 250px">
        <DatePicker v-model="row.birthday" type="date" placeholder="请输入生日日期"></DatePicker>
      </FormItem>
      <!-- <FormItem prop="birthmind" label="生日提醒" style="width: 250px">
        <DatePicker v-model="row.birthmind" type="date" placeholder="请输入生日提醒"></DatePicker>
      </FormItem> -->
      <FormItem prop="num" label="工号" style="width: 250px">
        <Input type="text" v-model="row.num" placeholder="请输入工号" />
      </FormItem>
      <!-- <FormItem label="头像" style="width: 250px">
        <Input type="text" v-model="row.icon" />
      </FormItem> -->
      <FormItem prop="intime" label="入职时间" style="width: 250px">
        <DatePicker v-model="row.intime" type="date" placeholder="请输入入职时间"></DatePicker>
      </FormItem>
      <FormItem prop="leavetime" label="离职时间" style="width: 250px">
        <DatePicker v-model="row.leavetime" type="date" placeholder="请输入离职时间"></DatePicker>
      </FormItem>
      <FormItem prop="state" label="状态" style="width: 250px">
        <Select v-model="row.state" clearable placeholder="请选择员工状态">
          <Option value="0">
            在职
          </Option>
          <Option value="1">
            离职
          </Option>
        </Select>
      </FormItem>
      <FormItem prop="deptid" label="部门ID" style="width: 250px">
        <Select v-model="row.deptid" clearable placeholder="请选择部门">
          <Option v-for="item in departmentList" :value="item.id.toString()" :key="item.id">
            {{ item.name }}
          </Option>
        </Select>
      </FormItem>
      <!-- <FormItem prop="muid" label="用户ID" style="width: 250px">
        <Input type="text" v-model="row.muid" placeholder="请输入用户ID" />
      </FormItem> -->
      <FormItem prop="job" label="工作岗位" style="width: 250px">
        <Input type="text" v-model="row.job" placeholder="请输入工作岗位" />
      </FormItem>
      <FormItem prop="color" label="工牌颜色" style="width: 250px">
        <Input type="text" v-model="row.color" placeholder="请输入工牌颜色" />
      </FormItem>
      <!-- <FormItem prop="contract" label="劳动合同" style="width: 250px">
        <Input type="text" v-model="row.contract" placeholder="请输入劳动合同" />
      </FormItem> -->
      <FormItem prop="expiredday" label="合同到期日" style="width: 250px">
        <DatePicker v-model="row.expiredday" type="date" placeholder="请输入合同到期日"></DatePicker>
      </FormItem>
      <FormItem prop="contractstart" label="合同起始日" style="width: 250px">
        <DatePicker v-model="row.contractstart" type="date" placeholder="请输入合同起始日"></DatePicker>
      </FormItem>
      <FormItem prop="contractend" label="合同结束日" style="width: 250px">
        <DatePicker v-model="row.contractend" type="date" placeholder="请输入合同结束日"></DatePicker>
      </FormItem>
      <FormItem prop="probation" label="试用期时长(月)" style="width: 250px">
        <!-- <DatePicker v-model="row.probation" format="yyyy-MM-dd" type="daterange" placeholder="请输入试用期" @on-change="handleChange"></DatePicker> -->
        <Input v-model="row.probation" type="text" placeholder="请输入试用期时长" />
      </FormItem>
      <!-- <FormItem prop="probationmind" label="试用期提醒" style="width: 250px">
        <DatePicker v-model="row.probationmind" type="date" placeholder="请输入试用期提醒"></DatePicker>
      </FormItem> -->
      <FormItem prop="fullday" label="实际转正日期" style="width: 250px">
        <DatePicker v-model="row.fullday" type="date" placeholder="请输入实际转正日期"></DatePicker>
      </FormItem>
      <FormItem prop="sitime" label="社保缴纳日期" style="width: 250px">
        <DatePicker v-model="row.sitime" type="date" placeholder="请输入社保缴纳日期"></DatePicker>
      </FormItem>
      <FormItem prop="emergency" label="紧急联系人" style="width: 250px">
        <Input v-model="row.emergency" type="text" placeholder="请输入紧急联系人" />
      </FormItem>
      <FormItem prop="rel" label="关系" style="width: 250px">
        <Input v-model="row.rel" type="text" placeholder="请输入关系" />
      </FormItem>
      <FormItem prop="etel" label="紧急联系方式" style="width: 250px">
        <Input v-model="row.etel" type="text" placeholder="请输入紧急联系方式" />
      </FormItem>
      <FormItem prop="school" label="毕业学校" style="width: 250px">
        <Input v-model="row.school" type="text" placeholder="请输入毕业学校" />
      </FormItem>
      <FormItem prop="ab" label="学历" style="width: 250px">
        <Input v-model="row.ab" type="text" placeholder="请输入学历" />
      </FormItem>
      <FormItem prop="abcommit" label="学历补充说明" style="width: 250px">
        <Input v-model="row.abcommit" type="text" placeholder="请输入学历补充说明" />
      </FormItem>
      <FormItem prop="study" label="专业" style="width: 250px">
        <Input v-model="row.study" type="text" placeholder="请输入专业" />
      </FormItem>
      <FormItem prop="selfposition" label="政治面貌" style="width: 250px">
        <Input v-model="row.selfposition" type="text" placeholder="请输入政治面貌" />
      </FormItem>
      <FormItem prop="native" label="籍贯" style="width: 250px">
        <Input v-model="row.native" type="text" placeholder="请输入籍贯" />
      </FormItem>
      <FormItem prop="residence" label="现居住地址" style="width: 250px">
        <Input v-model="row.residence" type="text" placeholder="请输入现居住地址" />
      </FormItem>
      <FormItem prop="nativeres" label="户籍地址" style="width: 250px">
        <Input v-model="row.nativeres" type="text" placeholder="请输入户籍地址" />
      </FormItem>
      <FormItem prop="householdtype" label="户籍类型" style="width: 250px">
        <Input v-model="row.householdtype" type="text" placeholder="请输入户籍类型" />
      </FormItem>
      <FormItem prop="annualtime" label="年假申请时间" style="width: 250px">
        <DatePicker v-model="row.annualtime" type="date" placeholder="请输入年假申请时间"></DatePicker>
      </FormItem>
      <FormItem prop="bankcard" label="银行卡号" style="width: 250px">
        <Input v-model="row.bankcard" type="text" placeholder="请输入银行卡号" />
      </FormItem>
      <FormItem prop="backcard" label="备用银行卡号" style="width: 250px">
        <Input v-model="row.backcard" type="text" placeholder="请输入备用银行卡号" />
      </FormItem>
      <FormItem prop="bankname" label="银行名称" style="width: 250px">
        <Input v-model="row.bankname" type="text" placeholder="请输入银行名称" />
      </FormItem>
      <FormItem prop="subbank" label="支行名称" style="width: 250px">
        <Input v-model="row.subbank" type="text" placeholder="请输入支行名称" />
      </FormItem>
      <FormItem prop="bankprovince" label="银行卡所在省" style="width: 250px">
        <Input v-model="row.bankprovince" type="text" placeholder="请输入银行卡所在省" />
      </FormItem>
      <FormItem prop="bankcity" label="银行卡所在市" style="width: 250px">
        <Input v-model="row.bankcity" type="text" placeholder="请输入银行卡所在市" />
      </FormItem>
      <FormItem prop="ssn" label="社保" style="width: 250px">
        <Input v-model="row.ssn" type="text" placeholder="请输入社保" />
      </FormItem>
      <FormItem prop="publicfund" label="公积金" style="width: 250px">
        <Input v-model="row.publicfund" type="text" placeholder="请输入公积金" />
      </FormItem>
      <FormItem prop="pid" label="所属" style="width: 250px">
        <Input v-model="row.pid" type="text" placeholder="请输入所属" />
      </FormItem>
      <!-- <FormItem prop="pid" label="所属" style="width: 250px">
        <Select v-model="row.pid" clearable placeholder="请选择上级ID">
          <Option v-for="item in pidList" :value="item.id.toString()" :key="item.id">
            {{ item.uname }}
          </Option>
        </Select>
      </FormItem> -->
      <FormItem prop="rootdept" label="一级部门" style="width: 250px">
        <Input v-model="row.rootdept" type="text" placeholder="请输入一级部门" />
      </FormItem>
      <FormItem prop="subdept" label="二级部门" style="width: 250px">
        <Input v-model="row.subdept" type="text" placeholder="请输入二级部门" />
      </FormItem>
      <FormItem v-if="row.id && row.icon!=='-' && row.icon!==''" prop="icon" label="头像" style="width: 100%">
        <img :src="row.icon" class="img">
      </FormItem>
      <FormItem v-else-if="row.id" prop="icon" label="头像" style="width: 100%">
        <div>暂无</div>
      </FormItem>
      <FormItem prop="des" label="备注" style="width: 100%">
        <Input v-model="row.des" type="textarea" placeholder="请输入备注" />
      </FormItem>
      <FormItem label="头像" style="width: 100%">
        <div class="demo-upload-list" v-for="item in uploadList" :key="item.id">
          <template v-if="item.status === 'finished'">
            <img :src="item.url">
            <div class="demo-upload-list-cover">
              <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
            </div>
          </template>
        </div>
        <Upload
          v-show="uploadList.length===0"
          ref="upload"
          :show-upload-list="false"
          :default-file-list="defaultList"
          :on-success="handleSuccess"
          :format="['jpg','jpeg','png']"
          :max-size="2048"
          :on-format-error="handleFormatError"
          :on-exceeded-size="handleMaxSize"
          :before-upload="handleBeforeUpload"
          :headers="{
            'agent': 'Web',
            'token': token
            }"
          type="drag"
          :action="actionUrl"
          style="display: inline-block;width:58px;">
          <div style="width: 58px;height:58px;line-height: 58px;">
            <Icon type="ios-camera" size="20"></Icon>
          </div>
        </Upload>
      </FormItem>
    </Form>
  </Modal>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
import { getToken } from '../../libs/util'
export default {
  name: 'EmployeeModal',
  data () {
    return {
      title: '',
      loading: true,
      // probationDate: [],
      // annualDate: [],
      // file: null,
      url: '',
      actionUrl: '',
      loadingStatus: false,
      defaultList: [],
      uploadList: [],
      imgName: '',
      token: getToken(),
      form: {
        name: '',
        tel: '',
        icon: '',
        num: '',
        intime: '',
        leavetime: '',
        state: '',
        des: ''
      },
      ruleInline: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        tel: [
          { required: true, message: '联系方式不能为空', trigger: 'blur' }
        ],
        num: [
          { required: true, message: '工号不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  updated () {
    if (this.row.id && this.row.id !== '') {
      this.title = '修改员工信息'
    } else {
      this.title = '添加员工记录'
    }
  },
  computed: {
    ...mapState({
      row: state => state.employee.row,
      modalState: state => state.modal.modalState,
      departmentList: state => state.department.departmentList,
      pidList: state => state.system.pidList
    })
  },
  methods: {
    ...mapActions(['updateModalState']),
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    // handleChange (value) {
    //   this.probationDate = value
    // },
    // handleAnnualChange (value) {
    //   this.annualDate = value
    // },
    handleSubmit () {
      this.$refs.employeeModal.validate((valid) => {
        if (!valid) {
          return this.changeLoading()
        }
        this.$emit('employee-valid', {
          id: this.row.id,
          name: this.row.name,
          tel: this.row.tel ? parseInt(this.row.tel) : '',
          num: this.row.num,
          icon: this.url ? this.url : '',
          intime: this.row.intime ? this.$moment(this.row.intime).format('YYYY-MM-DD HH:mm:ss') : '',
          leavetime: this.row.leavetime ? this.$moment(this.row.leavetime).format('YYYY-MM-DD HH:mm:ss') : '',
          state: this.row.state ? parseInt(this.row.state) : '',
          des: this.row.des,
          deptid: this.row.deptid ? parseInt(this.row.deptid) : '',
          muid: this.row.muid ? parseInt(this.row.muid) : '',
          job: this.row.job,
          color: this.row.color,
          sex: this.row.sex,
          contract: this.row.contract,
          expiredday: this.row.expiredday ? this.$moment(this.row.expiredday).format('YYYY-MM-DD HH:mm:ss') : '',
          contractstart: this.row.contractstart ? this.$moment(this.row.contractstart).format('YYYY-MM-DD HH:mm:ss') : '',
          contractend: this.row.contractend ? this.$moment(this.row.contractend).format('YYYY-MM-DD HH:mm:ss') : '',
          probation: this.row.probation ? parseInt(this.row.probation) : '',
          // probationmind: this.row.probationmind,
          fullday: this.row.fullday ? this.$moment(this.row.fullday).format('YYYY-MM-DD HH:mm:ss') : '',
          sitime: this.row.sitime ? this.$moment(this.row.sitime).format('YYYY-MM-DD HH:mm:ss') : '',
          idcard: this.row.idcard,
          birthmonth: this.row.birthmonth ? this.$moment(this.row.birthmonth).format('YYYYMM') : '',
          birthday: this.row.birthday ? this.$moment(this.row.birthday).format('YYYY-MM-DD') : '',
          // birthmind: this.row.birthmind,
          // age: this.row.age ? parseInt(this.row.age) : '',
          // coage: this.row.coage,
          people: this.row.people,
          marriage: this.row.marriage,
          emergency: this.row.emergency,
          rel: this.row.rel,
          etel: this.row.etel ? parseInt(this.row.etel) : '',
          school: this.row.school,
          ab: this.row.ab,
          abcommit: this.row.abcommit,
          study: this.row.study,
          selfposition: this.row.selfposition,
          native: this.row.native,
          residence: this.row.residence,
          nativeres: this.row.nativeres,
          householdtype: this.row.householdtype,
          annualtime: this.row.annualtime ? this.$moment(this.row.fullday).format('YYYY-MM-DD HH:mm:ss') : '',
          bankcard: this.row.bankcard,
          backcard: this.row.backcard,
          bankname: this.row.bankname,
          subbank: this.row.subbank,
          bankprovince: this.row.bankprovince,
          bankcity: this.row.bankcity,
          ssn: this.row.ssn,
          publicfund: this.row.publicfund,
          pid: this.row.pid,
          rootdept: this.row.rootdept,
          subdept: this.row.subdept
        })
        this.$refs['employeeModal'].resetFields()
        this.handleRemove()
      })
    },
    cancel () {
      this.updateModalState(false)
      this.$refs['employeeModal'].resetFields()
      this.handleRemove()
    },
    handleView (name) {
      this.imgName = name
      this.visible = true
    },
    handleRemove (file) {
      const fileList = this.$refs.upload.fileList
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1)
    },
    handleSuccess (response, file, fileList) {
      file.url = response.data
      this.url = response.data
    },
    async uploadIcon (playload) {
      await uploadFile(playload)
    },
    upload () {
      this.uploadIcon({ floder: this.fileName })
    },
    handleFormatError (file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: '请上传jpg、jpeg、png格式的图片'
      })
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: '文件大小不正确',
        desc: '请上传2M以下大小的图片'
      })
    },
    handleBeforeUpload (file) {
      // this.uploadData.folder = 'icon'
      this.fileName = file.name
      // this.upload()
      const check = this.uploadList.length < 1
      if (!check) {
        this.$Notice.warning({
          title: '只能上传1张图片'
        })
      }
      return check
    }
  },
  mounted () {
    this.uploadList = this.$refs.upload.fileList
    this.actionUrl = process.env.NODE_ENV === 'development' ? 'http://localhost:8080/api/upload?folder=icon' : 'http://tg.baisha.work:7071/api/upload?folder=icon'
  }
}
</script>
